<script setup>
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import img1 from '../../static/list/image1.png'
import { ref } from 'vue';

const toindex = () => {
  uni.redirectTo({ url: './../index/index'})
}

// 当前选中的统计类型：leave(离校), stay(留校), return(返校)
const activeType = ref('leave');
// 控制更多功能下拉框的显示与隐藏
const showMore = ref(false);

// 切换统计类型
const switchType = (type) => {
  activeType.value = type;
  // 隐藏更多功能下拉框
  showMore.value = false;
  console.log(`切换到${type === 'leave' ? '离校' : type === 'stay' ? '留校' : '返校'}统计`);
};

// 切换更多功能下拉框的显示状态
const toggleMore = () => {
  showMore.value = !showMore.value;
};

// 切换角色并跳转到新界面
const switchRole = () => {
  // 跳转到指定页面
  navigateTo({
    url: '/pages/index/index'
  });
  // 隐藏更多功能下拉框
  showMore.value = false;
};

// 统计数据（所有人数都设为0，总人数统一为10000人）
const statisticsData = {
  leave: {
    title: '2024假期离校',
    timeRange: '2024-12-12 00:00:00 至 2024-12-30 00:00:00',
    totalPeople: '10000 人',
    status: {
      pending: 0,
      notStarted: 0,
      leaving: 0,
      arrived: 0
    },
    colleges: [
      { name: '院系 A 学院', total: 0, pending: 0, notStarted: 0, leaving: 0, arrived: 0 },
      { name: '院系 B 学院', total: 0, pending: 0, notStarted: 0, leaving: 0, arrived: 0 },
      { name: '院系 C 学院', total: 0, pending: 0, notStarted: 0, leaving: 0, arrived: 0 }
    ]
  },
  stay: {
    title: '2024假期留校',
    timeRange: '2024-12-12 00:00:00 至 2024-12-30 00:00:00',
    totalPeople: '10000 人',
    status: {
      pending: 0,
      approved: 0,
      rejected: 0,
      checkedIn: 0
    },
    colleges: [
      { name: '院系 A 学院', total: 0, pending: 0, approved: 0, rejected: 0, checkedIn: 0 },
      { name: '院系 B 学院', total: 0, pending: 0, approved: 0, rejected: 0, checkedIn: 0 },
      { name: '院系 C 学院', total: 0, pending: 0, approved: 0, rejected: 0, checkedIn: 0 }
    ]
  },
  return: {
    title: '2024假期返校',
    timeRange: '2024-12-12 00:00:00 至 2024-12-30 00:00:00',
    totalPeople: '10000 人',
    status: {
      notStarted: 0,
      onTheWay: 0,
      arrived: 0,
      delayed: 0
    },
    colleges: [
      { name: '院系 A 学院', total: 0, notStarted: 0, onTheWay: 0, arrived: 0, delayed: 0 },
      { name: '院系 B 学院', total: 0, notStarted: 0, onTheWay: 0, arrived: 0, delayed: 0 },
      { name: '院系 C 学院', total: 0, notStarted: 0, onTheWay: 0, arrived: 0, delayed: 0 }
    ]
  }
};

// 搜索功能
const search = (value) => {
  console.log('搜索内容:', value);
};
</script>

<template>
  <view class="container">
    <uni-search-bar
        class="search"
        radius="10"
        placeholder="请输入姓名/学号关建词查询"
        clearButton="none"
        cancelButton="none"
        bg-color="#ffffff"
        @confirm="search"
    ></uni-search-bar>

    <!-- 统计卡片 -->
    <view class="card">
      <text class="holiday">{{ statisticsData[activeType].title }}</text>
      <br/>
      <text class="holidaytime">{{ statisticsData[activeType].timeRange }}</text>
      <br/>
      <text class="counts">{{ statisticsData[activeType].totalPeople }}</text>
      <br/>
      <image :src="img1" class="image"></image>
    </view>

    <!-- 统计内容区域 -->
    <view class="section">
      <view class="section-header">
        数据导出
        <text class="link"> 点击前往&gt;</text>
      </view>

      <!-- 状态统计 -->
      <view class="section">
        <text class="title">{{ activeType === 'leave' ? '离校申请' : activeType === 'stay' ? '留校申请' : '返校情况' }}</text>
        <view class="sheet">
          <!-- 根据当前类型显示不同的状态项 -->
          <template v-if="activeType === 'leave'">
            <view class="thing">
              <text class="same">待审核</text>
              <text class="value">{{ statisticsData.leave.status.pending }}</text>
            </view>
            <view class="thing">
              <text class="same">未开始</text>
              <text class="value">{{ statisticsData.leave.status.notStarted }}</text>
            </view>
            <view class="thing">
              <text class="same">离校中</text>
              <text class="value">{{ statisticsData.leave.status.leaving }}</text>
            </view>
            <view class="thing">
              <text class="same">已到目的地</text>
              <text class="value">{{ statisticsData.leave.status.arrived }}</text>
            </view>
          </template>

          <template v-if="activeType === 'stay'">
            <view class="thing">
              <text class="same">待审核</text>
              <text class="value">{{ statisticsData.stay.status.pending }}</text>
            </view>
            <view class="thing">
              <text class="same">已批准</text>
              <text class="value">{{ statisticsData.stay.status.approved }}</text>
            </view>
            <view class="thing">
              <text class="same">已拒绝</text>
              <text class="value">{{ statisticsData.stay.status.rejected }}</text>
            </view>
            <view class="thing">
              <text class="same">已签到</text>
              <text class="value">{{ statisticsData.stay.status.checkedIn }}</text>
            </view>
          </template>

          <template v-if="activeType === 'return'">
            <view class="thing">
              <text class="same">未开始</text>
              <text class="value">{{ statisticsData.return.status.notStarted }}</text>
            </view>
            <view class="thing">
              <text class="same">途中</text>
              <text class="value">{{ statisticsData.return.status.onTheWay }}</text>
            </view>
            <view class="thing">
              <text class="same">已到达</text>
              <text class="value">{{ statisticsData.return.status.arrived }}</text>
            </view>
            <view class="thing">
              <text class="same">延误</text>
              <text class="value">{{ statisticsData.return.status.delayed }}</text>
            </view>
          </template>
        </view>
      </view>

      <!-- 各院统计情况 -->
      <text class="col-title">各院{{ activeType === 'leave' ? '离校' : activeType === 'stay' ? '留校' : '返校' }}情况</text>

      <view class="school" v-for="(college, index) in statisticsData[activeType].colleges" :key="index">
        <view class="school-name">{{ college.name }}</view>
        <view class="sheet">
          <view class="sheet-thing">
            <text class="same1">学生总数</text>
            <text class="sheet-value">{{ college.total }}</text>
          </view>

          <!-- 根据当前类型显示不同的状态项 -->
          <template v-if="activeType === 'leave'">
            <view class="sheet-thing">
              <text class="same1">待审核</text>
              <text class="sheet-value">{{ college.pending }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">未开始</text>
              <text class="sheet-value">{{ college.notStarted }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">离校中</text>
              <text class="sheet-value">{{ college.leaving }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">已到目的地</text>
              <text class="sheet-value">{{ college.arrived }}</text>
            </view>
          </template>

          <template v-if="activeType === 'stay'">
            <view class="sheet-thing">
              <text class="same1">待审核</text>
              <text class="sheet-value">{{ college.pending }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">已批准</text>
              <text class="sheet-value">{{ college.approved }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">已拒绝</text>
              <text class="sheet-value">{{ college.rejected }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">已签到</text>
              <text class="sheet-value">{{ college.checkedIn }}</text>
            </view>
          </template>

          <template v-if="activeType === 'return'">
            <view class="sheet-thing">
              <text class="same1">未开始</text>
              <text class="sheet-value">{{ college.notStarted }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">途中</text>
              <text class="sheet-value">{{ college.onTheWay }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">已到达</text>
              <text class="sheet-value">{{ college.arrived }}</text>
            </view>
            <view class="sheet-thing">
              <text class="same1">延误</text>
              <text class="sheet-value">{{ college.delayed }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>

    <!-- 底部选择框 -->
    <view class="tab-bar">
      <view
          class="tab-item"
          :class="{ active: activeType === 'leave' }"
          @click="switchType('leave')"
      >
        <text>离校统计</text>
      </view>
      <view
          class="tab-item"
          :class="{ active: activeType === 'stay' }"
          @click="switchType('stay')"
      >
        <text>留校统计</text>
      </view>
      <view
          class="tab-item"
          :class="{ active: activeType === 'return' }"
          @click="switchType('return')"
      >
        <text>返校统计</text>
      </view>
      <view
          class="tab-item more-item"
          @click="toggleMore"
      >
        <text>更多</text>
        <!-- 更多功能下拉框 -->
        <view class="more-dropdown" v-if="showMore">
          <view class="dropdown-item" @click="switchRole">
            <text @click="toindex">切换角色</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  max-width: 375px;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 60px;
  width: 375px;
}

.search{
  width: 100%;
  height: 40px;
  margin-bottom: 12px;
}

.card{
  background-color: rgba(233, 241, 252, 1);
  width: 100%;
  height: 170px;
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
}
.holiday{
  font-size: 20px;
}
.holidaytime{
  font-size: 12px;
  color: #6f6f6f;
}
.counts{
  font-size: 28px;
  font-weight: 600;
  margin-top: 6px;
}
.image{
  width: 77px;
  height: 77px;
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.section{
  width: 100%;
  margin-top: 14px;
  background: #f5f9ff;
  border-radius: 10px;
  padding: 12px;
  box-sizing: border-box;
}
.section-header{
  font-size: 14px;
  color: #1c6ed9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #e6f0ff;
  margin-bottom: 8px;
}
.link{
  color: #1c6ed9;
  font-size: 12px;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #e6f0ff;
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  display: block;
}
.sheet {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.thing {
  flex: 1;
  background: #f0f6ff;
  border-radius: 6px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.same {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}
.value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}


.col-title{
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.school{
  margin-top: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #e6f0ff;
  box-sizing: border-box;
}
.school-name{
  font-weight: 600;
  color: #1a60b4;
  margin-bottom: 8px;
}
.sheet{
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  width: 100%;
  justify-content: space-between;
}
.sheet-thing{
  width: 63px;
  height: 63px;
  background: #f0f6ff;
  border-radius: 6px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.same1{
  font-size: 11px;
  color: #3a3a3a;
  text-align: center;
  line-height: 1.2;
}
.sheet-value{
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
}

/* 底部选择框样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  max-width: 375px;
  margin: 0 auto;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 999; /* 确保在其他内容上方 */
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #666;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.tab-item.active {
  color: #1c6ed9;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1c6ed9;
}

/* 更多功能样式 */
.more-item {
  position: relative; /* 为下拉框提供定位上下文 */
}

/* 下拉框样式 */
.more-dropdown {
  position: absolute;
  bottom: 50px; /* 位于底部导航上方 */
  right: 0;
  width: 120px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1000;
}

/* 下拉框选项样式 */
.dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  text-align: center;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:active {
  background-color: #f5f9ff;
  color: #1c6ed9;
}
</style>
